<template>
  <div>
    <div class="head">
      <p class="text">数码分类</p>
      <van-icon
        @click="onClickLeft()"
        size="20"
        color="whitesmoke"
        name="arrow-left"
        class="icon"
      />
    </div>
    <el-tabs
      :tab-position="tabPosition"
      @tab-click="tabClick"
      v-model="activeName"
      style="height: 670px"
    >
      <el-tab-pane label="热门" name="0">
        <div class="hot_soft" v-for="(item, index) in list" :key="index">
          <van-image
            class="hot_img"
            width="40"
            height="40"
            :src="item.app_image_road"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="手机" name="1">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
            <div class="foot"></div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="电脑" name="2">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="平板" name="3">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="耳机" name="4">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="外设" name="5">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="智能家居" name="6">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
           
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="穿戴设备" name="7">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="游戏影音" name="8">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="网络设备" name="9">
        <div class="guess_like" @click="jumpGameUpdate()">
          <div
            @click.stop="jumpDetail(item, index)"
            class="guess_like_show"
            v-for="(item, index) in computerList"
            :key="index"
          >
            <van-image
              radius="10"
              class="guess_like_img"
              width="50"
              height="50"
              :src="item.digital_image_road"
            />
            <span class="guess_like_sp1">{{ item.digital_name }}</span>
            <span class="guess_like_sp2">{{ item.digital_heat }}w热度</span>
            
            <div v-if="id===null">
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="jumpLogin()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
            </div>
            <div v-else>
              <van-button
                v-show="focusButton"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >&nbsp;&nbsp;关 &nbsp;&nbsp;注&nbsp;&nbsp;
              </van-button>
              <van-button
                v-show="!focusButton"
                color="gray"
                round
                type="info"
                size="small"
                class="guess_like_small"
                @click.stop="focusThem()"
                >已&nbsp;&nbsp;关&nbsp;&nbsp;注</van-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      tabPosition: 'left',
      activeName: this.$route.params.id + '',
      index: 0,
      list: [],
      computerList: [],
      phoneList: [],
      focusButton: true,
      id: sessionStorage.getItem('roleId'),
    };
  },
  mounted() {
    http
      .getDigitalProduct({
        pages: 1,
        digital_category_id: this.$route.params.id,
      })
      .then((r) => {
        console.log(r);
        this.computerList = r.data;
      });
  },
  methods: {
    jumpLogin(){
      this.$router.push('/login');

    },
    focusThem(item) {
      this.focusButton = !this.focusButton;
    },

    // 跳到详情
    jumpDetail(item, index) {
      this.$router.push('/digitalDetails/' + item.digital_id);
    },
    onClickLeft() {
      this.$router.push('/digital');
    },
    tabClick(tab, j) {
      http
        .getDigitalProduct({
          pages: 1,
          digital_category_id: parseInt(tab.index),
        })
        .then((r) => {
          console.log(r);
          this.computerList = r.data;
        });
      this.index = tab.index;
      // console.log(tab,j);
      console.log(tab.index);
    },
  },
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 4rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgb(108, 144, 243);
}
.text {
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  line-height: 4rem;
}
.icon {
  position: absolute;
  top: 1.1rem;
  /* left: 0px; */
}
.hot_soft {
  margin-top: 1rem;
  width: 26rem;
  height: 7rem;
  border-radius: 1.5rem;
  background-color: white;
  position: relative;
}
.hot_img {
  position: absolute;
  top: 1.5rem;
  left: 1.1rem;
}
.guess_like {
  width: 96%;
  height: 600px;
  margin: 0 auto;
  border-radius: 1.5rem;
  background-color: white;
}
.foot {
  width: 20%;
  height: 8rem;
}
.guess_text {
  position: relative;
}
.guess_text_sp1 {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: 1.6rem;
}
.guess_arrow {
  position: absolute;
  right: 1rem;
  top: 1.3rem;
  font-size: 2rem;
}
.guess_like_show {
  width: 96%;
  height: 5.5rem;
  position: relative;
  margin-top: 2rem;
}
.guess_like_img {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  border-radius: 1rem;
}
.guess_like_sp1 {
  position: absolute;
  top: 0.1rem;
  left: 7.5rem;
  font-size: 1.8rem;
  color: #252525;
}
.guess_like_sp2 {
  position: absolute;
  top: 3rem;
  left: 7.5rem;
  font-size: 1.4rem;
  color: #7a7a7a;
}
.guess_like_small {
  position: absolute;
  top: 0.8rem;
  right: 0px;
  width: 7rem;
}
</style>